<!--
 * @Author: wangyu1
 * @Date: 2022-11-09 17:56:39
 * @Description: file content
-->
<template>
  <div id="app">
    <div class="content">
      <router-link
        v-for="(item, index) in linkList"
        :key="index"
        active-class="linkActive"
        class="linkItem"
        :to="item.to"
        >{{ item.name }}</router-link
      >
    </div>
    <router-view></router-view>
    <!-- <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select> -->
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      options: [{
          value: '选项888',
          label: '黄金糕1'
        }, {
          value: '选项2',
          label: '黄金糕'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: '',
      linkList: [
        {
          to: "gc",
          name: "全局组件",
        },
        {
          to: "form",
          name: "表单封装",
        },
        {
          to: "check",
          name: "表单校验",
        },
        {
          to: 'dynamicForm',
          name: "动态表单",
        },
        {
          to: 'pagination',
          name: "本地分页",
        },
        {
          to: 'dynamicSelect',
          name: "select动态增减",
        },
        {
          to: 'customComponents',
          name: "自定义组件",
        }
      ],
    };
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.linkItem {
  width: 120px;
  height: 50px;
  border-radius: 50px;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  background-color: skyblue;
  margin: 10px;
  transition: 0.5s;
  color: azure;
}
.linkItem:hover {
  width: 150px;
  /* background-color: rgb(26, 129, 254); */
  background-color: #0093e9;
  background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);
  transition: 0.5s;
}
.linkActive {
  width: 150px;
  /* background-color: rgb(26, 129, 254); */
  background-color: #0093e9;
  background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);
  transition: 0.5s;
}
</style>
